<template>
  <div class="vivid-split-pane" :class="[`vivid-split-pane--${mode}`, { 'is-dragging': isDragging }]"
    @mousemove="handleMove" @mouseup="handleUp" @mouseleave="handleUp">
    <div class="vivid-split-pane__left" :style="leftPaneStyle">
      <slot name="left"></slot>
    </div>

    <div class="vivid-split-pane__splitter" @mousedown="handleDown"></div>

    <div class="vivid-split-pane__right" :style="rightPaneStyle">
      <slot name="right"></slot>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: 'ViSplitPane',
  props: {
    // 分隔模式：horizontal(水平) 或 vertical(垂直)
    mode: {
      type: String,
      default: 'horizontal',
      validator: (val: string) => ['horizontal', 'vertical'].includes(val)
    },
    // 初始分隔位置 (0-1 之间的值)
    initialSplit: {
      type: Number,
      default: 0.5,
      validator: (val: number) => val >= 0 && val <= 1
    },
    // 最小左侧/上部面板大小 (像素或百分比)
    minSize: {
      type: [String, Number],
      default: '20%'
    },
    // 最大左侧/上部面板大小 (像素或百分比)
    maxSize: {
      type: [String, Number],
      default: '80%'
    }
  },
  data() {
    return {
      isDragging: false,
      splitPosition: this.initialSplit,
      startPosition: 0,
      startSplitPosition: 0
    }
  },
  computed: {
    leftPaneStyle() {
      const size = this.splitPosition * 100
      return {
        [this.mode === 'horizontal' ? 'width' : 'height']: `${size}%`,
        'min-width': this.mode === 'horizontal' ? this.minSize : 'auto',
        'min-height': this.mode === 'vertical' ? this.minSize : 'auto',
        'max-width': this.mode === 'horizontal' ? this.maxSize : 'auto',
        'max-height': this.mode === 'vertical' ? this.maxSize : 'auto'
      }
    },
    rightPaneStyle() {
      const size = (1 - this.splitPosition) * 100
      return {
        [this.mode === 'horizontal' ? 'width' : 'height']: `${size}%`,
        'min-width': this.mode === 'horizontal' ? this.minSize : 'auto',
        'min-height': this.mode === 'vertical' ? this.minSize : 'auto',
        'max-width': this.mode === 'horizontal' ? this.maxSize : 'auto',
        'max-height': this.mode === 'vertical' ? this.maxSize : 'auto'
      }
    }
  },
  methods: {
    handleDown(e: MouseEvent) {
      this.isDragging = true
      this.startPosition = this.mode === 'horizontal' ? e.clientX : e.clientY
      this.startSplitPosition = this.splitPosition
      document.addEventListener('mouseup', this.handleUp)
    },
    handleMove(e: MouseEvent) {
      if (!this.isDragging) return

      const clientPos = this.mode === 'horizontal' ? e.clientX : e.clientY
      const containerSize = this.$el[this.mode === 'horizontal' ? 'clientWidth' : 'clientHeight']
      const delta = clientPos - this.startPosition
      const deltaRatio = delta / containerSize

      this.splitPosition = Math.min(
        Math.max(
          this.startSplitPosition + deltaRatio,
          0
        ),
        1
      )

      this.$emit('split-change', this.splitPosition)
    },
    handleUp() {
      if (this.isDragging) {
        this.isDragging = false
        document.removeEventListener('mouseup', this.handleUp)
        this.$emit('split-end', this.splitPosition)
      }
    }
  }
}
</script>

<style scoped>
.vivid-split-pane {
  display: flex;
  width: 100%;
  height: 100%;
  position: relative;
}

.vivid-split-pane--horizontal {
  flex-direction: row;
}

.vivid-split-pane--vertical {
  flex-direction: column;
}

.vivid-split-pane__left,
.vivid-split-pane__right {
  overflow: auto;
}

.vivid-split-pane__left {
  background-color: #f5f7fa;
}

.vivid-split-pane__right {
  background-color: #fafafa;
}

.vivid-split-pane__splitter {
  background-color: #dcdfe6;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
}

.vivid-split-pane--horizontal .vivid-split-pane__splitter {
  width: 8px;
  cursor: col-resize;
  border-left: 1px solid #ebeef5;
  border-right: 1px solid #ebeef5;
}

.vivid-split-pane--vertical .vivid-split-pane__splitter {
  height: 8px;
  cursor: row-resize;
  border-top: 1px solid #ebeef5;
  border-bottom: 1px solid #ebeef5;
}

.vivid-split-pane.is-dragging {
  user-select: none;
}

.vivid-split-pane.is-dragging .vivid-split-pane__splitter {
  background-color: #409eff;
  opacity: 0.8;
}
</style>
